<template>
  <div>
    <ul style="text-align:center;font-size:18px;">
      <router-link :to="'/user/'+list.link" v-for="(list,index) in lists" 
        :key="index" active-class="active">
        <i :class="'el-icon-'+list.icon"></i>{{list.item}}
      </router-link>
      <a @click="exitAccount"><i class="el-icon-upload2"></i>退出账号</a>
    </ul>
  </div>
</template>

<script>
export default {
    name:'Person',
    data() {
      return {
        lists:[
          {link:'info',icon:'user',item:'我的信息'},
          {link:'order',icon:'goods',item:'我的订单'},
          {link:'address',icon:'location-outline',item:'我的地址'},
          // {link:'footmark',icon:'s-data',item:'我的足迹'},
          {link:'about',icon:'question',item:'关于品尚'},
        ],
      }
    },
    methods: {
      exitAccount(){
        localStorage.removeItem('key');
        if(this.$route.path === '/user/info'){
          this.$router.go(0)
        }else{
          this.$router.push('/user/info')
        }
      }
    },
}
</script>

<style scoped>
    .active{
    color: #C69C6C;
    background: #F4F3F1;
  }
  
  ul a{
    display: block;
    line-height: 70px;
    color: black;
    cursor: pointer;
    font-family: '宋体';
  }
  ul a:hover{
    background: #F4F3F1;
    color: #C69C6C;
  }
  a i{
    margin-right:10px;
  }
</style>